<template>
  <div id="right" style="background: #0088b5">

  </div>
</template>

<script lang="ts">
  import {Component, Model, Prop, Vue, Watch} from 'vue-property-decorator'

  @Component
  export default class Right extends Vue {
    name = "right";
    imgUrl: string = "http://imain.net/usr/uploads/2018/02/1254835428.png";
  }
</script>

<style lang="scss">

  @import "../../assets/scss/config";

  #right {
    width: $right-width;
    margin: 15px 0 20px 2px;
    .icon {
      margin-right: 10px;
      display: inline-block;
      transition: color .3s;
      &.hot:hover {
        color: rgba(255, 0, 0, .6);
      }
      &.user:hover {
        color: rgb(64, 158, 255);
      }
    }
    dd {
      font-size: 12px;
      padding: 5px 0;
      .left-img {
        display: inline-block;
        height: 50px;
        width: 50px;
      }
      .right-content {
        display: inline-block;
        position: relative;
        vertical-align: middle;
        margin-left: 5px;
      }
      .title {
        width: 108px;
        overflow-x: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    img {
      height: 100%;
      width: 100%;
      border-radius: 50%;
      vertical-align: middle;
    }
  }

</style>
